<template>
  <div class="root">
    <!-- <div class="my-sidebar-menu"> -->
    <sidebar-menu
      :menu="menu"
      relative
      theme="white-theme"
      width="20%"
      id="my-sidebar-menu"
      class="my-sidebar-menu"
      ><span slot="toggle-icon"><i class="el-icon-more"></i></span>
    </sidebar-menu>
    <!-- </div> -->
    <div class="router-view" id="router-view">
      <transition name="card-fade"><router-view /></transition>
    </div>
    <div style="clear: both; height: 5%"></div>
    <Bottom style="margin-left:230px;height : 35%"/>
  </div>
</template>

<script>
import Bottom from "@/components/Bottom";
export default {
  components: {
    Bottom,
  },
  watch: {
    $route(to, from) {
      this.to = to.path//从哪来
      this.from = from.path
    },
    from(newData){
       //document.getElementById("my-sidebar-menu").style.height = document.getElementById("router-view").clientHeight + "px";
    }
  },
  created(){
      this.$router.push('/home/second_page/trade_statistic')
  },
  mounted() {

    //document.getElementById("my-sidebar-menu").style.height = document.getElementById("router-view").clientHeight + "px";
    //ProfitAndLoss statistics
  },
  data() {
    return {
      menu: [
        {
          header: true,
          title: "我的交易",
          hiddenOnCollapse: true,
        },
        {
          href: "/home/second_page/trade_statistic",
          title: "近期交易统计",
          icon: "el-icon-notebook-2",
        },
        {
          href: "/home/second_page/order_management",
          title: "交易订单",
          icon: "el-icon-s-data",
        },
        {
          href: "/home/second_page/distribution",
          title: "订单配送",
          icon: "el-icon-location-outline",
        },
        {
          header: true,
          title: "我的店铺",
          hiddenOnCollapse: true,
        },
        {
          href: "/home/second_page/store_goods_list",
          title: "我的商品",
          icon: "el-icon-present",
        },
        {
          href: "/home/second_page/release_or_update",
          title: "发布商品",
          icon: "el-icon-position",
        },
        {
          href: "/home/second_page/information",
          title: "资讯发布",
          icon: "el-icon-coffee-cup",
        },
      ],
      to : '',
      from : ''
    };
  },
};
</script>
<style lang="scss"scoped>
.root {
  height: 1095px;
  .my-sidebar-menu {
    width: 20%;
    height: 100%;
    // border: 1px solid green;
    background-image: url(/images/menu.jpg);
    background-position: 50% 0;
    // background-size: 100% 100%;
    // background: -moz-linear-gradient(left, #9fa5d5, #e8f5c8); /*火狐*/

    // background: -webkit-gradient(
    //   linear,
    //   0% 0%,
    //   0% 100%,
    //   from(#9fa5d5),
    //   to(#e8f5c8)
    // );
    float: left;
    margin: 5px 0 0 0;
  }
  .router-view {
    float: left;
    width: 79%;
    height: 100%;
    margin: 5px 0 0 0;

    //border: 1px solid green;
  }
}
.card-fade-enter-active {
  animation: bounce-in 2s;
}
</style>